<template>
  <el-drawer
    :title="`${posName}逐时太阳辐射信息`"
    :visible.sync="drawer"
    direction="rtl"
    size="35%"
    @close="handleClose"
  >
    <div class="wrapper">
      <div v-for="(item, index) in cards" :key="index" class="card">
        <input class="input" type="radio" name="card" :value="item.sty" />
        <span class="check" />
        <label class="label">
          <div class="title">{{ item.name }}</div>
          <div class="price">
            <span class="span"><i class="qi-sunny-fill" /> </span>
            {{ item.value }}
            <span class="span">/W/m<sup>2</sup></span>
          </div>
        </label>
      </div>
    </div>
    <h3>辐射分布图</h3>
    <NormalDistribution />

    <h3>辐射雷达图</h3>
    <RadiationRadar />
  </el-drawer>
</template>

<script>
import $ from 'jquery'

import NormalDistribution from './chart/NormalDistribution'
import RadiationRadar from './chart/RadiationRadar'
export default {
  name: 'Radiation',
  components: {
    NormalDistribution,
    RadiationRadar
  },
  data() {
    return {
      drawer: false,
      cards: [
        {
          name: '净太阳辐射',
          value: 0.0,
          sty: 'basic'
        },
        {
          name: '太阳散辐射',
          value: 0.0,
          sty: 'standart'
        },
        {
          name: '太阳直接辐射',
          value: 0.0,
          sty: 'premium'
        }
      ],
      posName: '',
      cor: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$parent.changToRad()
    })

    this.$bus.$on('rad', this.receiveRadInfo)
  },
  beforeDestroy() {
    this.$bus.$off('rad')
  },
  methods: {
    receiveRadInfo(loc, name) {
      this.cor = loc
      this.posName = name
      this.drawer = true
    },
    handleClose() {
      $('.input').prop('checked', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-drawer {
  .wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;

    .card {
      position: relative;
      width: 130px;
      height: 90px;
      background: #fff;
      border-radius: 10px;
      transition: all 0.3s;

      &:hover {
        transform: scale(1.05);
      }

      .input {
        position: relative;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        appearance: none;
        cursor: pointer;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        box-shadow: 1px 1px 10px #aaa, -1px -1px 10px #fff;

        & + .check::before {
          position: absolute;
          top: 15px;
          right: 15px;
          width: 16px;
          height: 16px;
          content: '';
          background-color: #e8e8e8;
          border: 2px solid #d0d0d0;
          border-radius: 50%;
        }
      }

      .input:checked + .check::after {
        position: absolute;
        top: 19px;
        right: 19px;
        width: 12px;
        height: 12px;
        content: '';
        background-color: rgb(255 0 0 / 70%);
        border-radius: 50%;
      }

      .input[value='standart']:checked + .check::after {
        background-color: rgb(255 165 0 / 70%);
      }

      .input[value='premium']:checked + .check::after {
        background-color: rgb(0 128 0 / 70%);
      }

      .input[value='basic']:checked {
        border: 1.5px solid rgb(255 0 0 / 70%);
      }

      .input[value='standart']:checked {
        border: 1.5px solid rgb(255 165 0 / 70%);
      }

      .input[value='premium']:checked {
        border: 1.5px solid rgb(0 128 0 / 70%);
      }

      .label {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        color: #323232;

        .title {
          margin: 15px 0 0 15px;
          font-size: 15px;
          font-weight: 900;
          letter-spacing: 1.5px;
        }

        .price {
          margin: 20px 0 0 15px;
          font-size: 20px;
          font-weight: 900;
        }

        .span {
          font-size: 15px;
          font-weight: 700;
          color: gray;
        }
      }
    }
  }

  h3 {
    margin: 10px 0;
    text-align: center;
  }
}
</style>
